<template>
  <div class="container">
    <el-dialog
      :model-value="showDialog"
      title="Shipping address"
      @close="close"
    >
      <template #title
        ><div class="title">
          <img src="@/assets/img/icon/common/common-136.svg" alt="" />
          个人信息修改
        </div>
      </template>
      <div class="flex flex-align-center flex-center head_portrait">
        <!-- <el-upload :before-upload="upAvatar"> -->
        <div class="avatar-box flex flex-column flex-align-center flex-center">
          <div class="avatar">
            <img v-if="form.avatar" :src="form.avatar" alt="" />
          </div>
          <!-- <p class="change-text">更改头像</p> -->
        </div>
        <!-- </el-upload> -->
      </div>
      <el-form :model="form" :rules="rules" ref="formRef">
        <el-form-item
          label="姓名"
          :label-width="formLabelWidth"
          prop="doctor_name"
        >
          <el-input
            v-model="form.doctor_name"
            disabled
            placeholder="请输入姓名"
          />
        </el-form-item>
        <el-form-item label="职称" :label-width="formLabelWidth">
          <el-input v-model="form.job" disabled placeholder="请输入职称" />
        </el-form-item>
        <el-form-item
          label="负责疾病"
          :label-width="formLabelWidth"
          prop="items_id"
        >
          <el-select
            v-model="form.items_id"
            multiple
            placeholder="请选择您负责的疾病"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话号码" :label-width="formLabelWidth">
          <el-input
            v-model="form.phone"
            disabled
            placeholder="请输入您的电话号码"
          />
        </el-form-item>
        <el-form-item
          label="身份证号码"
          :label-width="formLabelWidth"
          prop="id_card"
        >
          <el-input
            v-model="form.id_card"
            disabled
            placeholder="请输入您的身份证号码"
          />
        </el-form-item>
        <el-form-item
          label="诊费"
          :label-width="formLabelWidth"
          prop="service_price"
        >
          <el-input v-model="form.service_price" placeholder="请输入您的诊费" />
        </el-form-item>
        <el-form-item
          label="业务擅长"
          :label-width="formLabelWidth"
          prop="be_good_at"
        >
          <el-input
            v-model="form.be_good_at"
            disabled
            :autosize="{ minRows: 6, maxRows: 12 }"
            type="textarea"
            placeholder=""
          >
          </el-input>
        </el-form-item>

        <el-form-item
          label="个人简介"
          :label-width="formLabelWidth"
          prop="desc"
        >
          <el-input
            disabled
            v-model="form.desc"
            :autosize="{ minRows: 6, maxRows: 12 }"
            type="textarea"
            placeholder=""
          >
          </el-input>
        </el-form-item>
        <div class="flex flex-center">
          <el-button type="primary" class="footer-btn" @click="onSubmit"
            >保存</el-button
          >
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { ref, reactive, toRefs, defineComponent } from 'vue'
import { SetInfo, DoctorInfo } from '@/service/api/doctor'
import { useStore } from 'vuex'
import { rules } from '../config/info-config'
import { ElMessage, ElForm } from 'element-plus'

export default defineComponent({
  name: 'editDialog',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    userInfo: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['update:showDialog'],
  setup(props, { emit }) {
    const store = useStore()
    const formRef = ref<InstanceType<typeof ElForm>>()
    const state = reactive({
      form: {
        id: props.userInfo.id,
        avatar: props.userInfo.avatar,
        doctor_name: props.userInfo.doctor_name,
        items_id: props.userInfo.items_id.split(','),
        job: props.userInfo.job,
        desc: props.userInfo.desc,
        phone: props.userInfo.phone,
        id_card: props.userInfo.id_card,
        service_price: props.userInfo.service_price,
        be_good_at: props.userInfo.be_good_at
      },
      formLabelWidth: '120px'
    })
    const close = () => {
      emit('update:showDialog', false)
    }
    // 上传图片
    const upAvatar = async (file: Blob) => {
      try {
        let param = new FormData()
        param.append('file', file)
        // upload(param).then((res) => {
        //   if (res.code == 200) {
        //     this.formData.avatar = res.data.short_url
        //     this.$nextTick(() => {
        //       this.$refs['qimg'].src = res.data.url
        //     })
        //   }
        // })
      } catch (error) {
        if (error) {
          console.log(error)
        }
      }
    }
    // 保存
    const onSubmit = () => {
      formRef.value?.validate((valid) => {
        if (valid) {
          let posData = {
            ...state.form,
            items_id: state.form.items_id.toString()
          }
          SetInfo(posData).then(async (res) => {
            if (res.code == 200) {
              ElMessage.success('设置成功')
              let userRes = await DoctorInfo()
              let userInfo = userRes.data
              store.commit('user/initInfo', userInfo)
            }
          })
        }
      })
    }
    return {
      ...toRefs(state),
      options: ref([
        {
          label: '收缩压',
          value: '1'
        },
        {
          label: '舒张压',
          value: '2'
        },
        {
          label: '血压',
          value: '3'
        },
        {
          label: '血糖',
          value: '4'
        },
        {
          label: '尿酸',
          value: '5'
        },
        {
          label: '总胆固醇',
          value: '6'
        },
        {
          label: '甘油三酯',
          value: '7'
        },
        {
          label: '心率',
          value: '8'
        }
      ]),
      value1: ref([]),
      formRef,
      rules,
      close,
      upAvatar,
      onSubmit
    }
  }
})
</script>

<style lang="less" scoped>
:deep(.el-dialog) {
  border-radius: 16px;
  overflow: hidden;
}
:deep(.el-dialog__header) {
  padding: 0;
  background-color: #679aff;
}
:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: #fff;
  border: 1px solid #fff;
  border-radius: 100%;
  font-size: 26px;
}
:deep(.el-select) {
  width: 100%;
}
.title {
  padding: 19px 25px;
  background-color: #679aff;
  display: flex;
  align-items: center;
  font-size: 26px;
  color: #fff;
  img {
    width: 30px;
    margin-right: 6px;
  }
}
.head_portrait {
  height: 166px;
  img {
    width: 100%;
  }
  .avatar {
    width: 100px;
    height: 100px;
    overflow: hidden;
  }
  .change-text {
    margin-top: 5px;
    color: #679aff;
    font-size: 14px;
  }
}
.footer-btn {
  width: 267px;
  height: 48px;
  margin: 0 auto;
}
</style>
